<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编辑宠物 - 宠物医院管理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/style.css" rel="stylesheet">
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <!-- 侧边栏 -->
            <div class="col-md-2 p-0">
                <%@ include file="../common/admin-sidebar.jsp" %>
            </div>
            
            <!-- 主内容区域 -->
            <div class="col-md-10">
                <div class="main-content p-4">
                    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                        <h1 class="h2">编辑宠物</h1>
                        <div class="btn-toolbar mb-2 mb-md-0">
                            <a href="${pageContext.request.contextPath}/pet/list" class="btn btn-sm btn-outline-secondary">
                                <i class="fas fa-arrow-left"></i> 返回列表
                            </a>
                        </div>
                    </div>

                    <!-- 错误消息 -->
                    <c:if test="${not empty error}">
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            ${error}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    </c:if>

                    <!-- 编辑表单 -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">宠物信息</h5>
                        </div>
                        <div class="card-body">
                            <form method="post" action="${pageContext.request.contextPath}/pet/update" id="editForm" enctype="multipart/form-data">
                                <input type="hidden" name="petId" value="${pet.petId}">
                                <input type="hidden" name="ownerId" value="${pet.ownerId}">
                                
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="petName" class="form-label">宠物姓名 <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" id="petName" name="petName" 
                                                   value="${pet.petName}" required maxlength="50" placeholder="输入宠物姓名">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="petType" class="form-label">宠物类型 <span class="text-danger">*</span></label>
                                            <select class="form-select" id="petType" name="petType" required>
                                                <option value="">请选择宠物类型</option>
                                                <option value="狗" ${pet.petType == '狗' ? 'selected' : ''}>狗</option>
                                                <option value="猫" ${pet.petType == '猫' ? 'selected' : ''}>猫</option>
                                                <option value="鸟" ${pet.petType == '鸟' ? 'selected' : ''}>鸟</option>
                                                <option value="鱼" ${pet.petType == '鱼' ? 'selected' : ''}>鱼</option>
                                                <option value="兔子" ${pet.petType == '兔子' ? 'selected' : ''}>兔子</option>
                                                <option value="仓鼠" ${pet.petType == '仓鼠' ? 'selected' : ''}>仓鼠</option>
                                                <option value="其他" ${pet.petType == '其他' ? 'selected' : ''}>其他</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="breed" class="form-label">品种</label>
                                            <input type="text" class="form-control" id="breed" name="breed" 
                                                   value="${pet.breed}" maxlength="50" placeholder="输入宠物品种">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="gender" class="form-label">性别</label>
                                            <select class="form-select" id="gender" name="gender">
                                                <option value="">请选择性别</option>
                                                <option value="male" ${pet.gender == 'male' ? 'selected' : ''}>雄性</option>
                                                <option value="female" ${pet.gender == 'female' ? 'selected' : ''}>雌性</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="age" class="form-label">年龄（月）</label>
                                            <input type="number" class="form-control" id="age" name="age" 
                                                   value="${pet.age}" min="0" max="300" placeholder="输入年龄（月）">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="weight" class="form-label">体重（kg）</label>
                                            <input type="number" class="form-control" id="weight" name="weight" 
                                                   value="${pet.weight}" step="0.1" min="0" max="200" placeholder="输入体重">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="color" class="form-label">毛色</label>
                                            <input type="text" class="form-control" id="color" name="color" 
                                                   value="${pet.color}" maxlength="30" placeholder="输入毛色">
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="status" class="form-label">健康状态</label>
                                            <select class="form-select" id="status" name="status">
                                                <option value="healthy" ${pet.status == 'healthy' ? 'selected' : ''}>健康</option>
                                                <option value="sick" ${pet.status == 'sick' ? 'selected' : ''}>生病</option>
                                                <option value="injured" ${pet.status == 'injured' ? 'selected' : ''}>受伤</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="photo" class="form-label">宠物照片</label>
                                            <input type="file" class="form-control" id="photo" name="photo" 
                                                   accept="image/*" onchange="previewImage(this)">
                                            <div class="form-text">支持JPG、PNG格式，文件大小不超过5MB</div>
                                        </div>
                                    </div>
                                </div>

                                <!-- 当前照片预览 -->
                                <c:if test="${not empty pet.photoUrl}">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label class="form-label">当前照片</label>
                                                <div>
                                                    <img src="${pageContext.request.contextPath}/${pet.photoUrl}" 
                                                         alt="${pet.petName}" class="img-thumbnail" 
                                                         style="max-width: 200px; max-height: 200px;">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label class="form-label">新照片预览</label>
                                                <div>
                                                    <img id="imagePreview" src="#" alt="新照片预览" 
                                                         class="img-thumbnail" style="max-width: 200px; max-height: 200px; display: none;">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </c:if>

                                <div class="mb-3">
                                    <label for="description" class="form-label">描述</label>
                                    <textarea class="form-control" id="description" name="description" rows="4" 
                                              maxlength="500" placeholder="输入宠物的详细描述...">${pet.description}</textarea>
                                    <div class="form-text">最多500个字符</div>
                                </div>

                                <div class="d-flex justify-content-end">
                                    <a href="${pageContext.request.contextPath}/pet/view?id=${pet.petId}" class="btn btn-secondary me-2">
                                        <i class="fas fa-times"></i> 取消
                                    </a>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-save"></i> 保存修改
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 图片预览
        function previewImage(input) {
            const preview = document.getElementById('imagePreview');
            if (input.files && input.files[0]) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    preview.src = e.target.result;
                    preview.style.display = 'block';
                };
                reader.readAsDataURL(input.files[0]);
            } else {
                preview.style.display = 'none';
            }
        }

        // 表单验证
        document.getElementById('editForm').addEventListener('submit', function(e) {
            const petName = document.getElementById('petName').value.trim();
            const petType = document.getElementById('petType').value;

            if (!petName) {
                alert('请输入宠物姓名');
                e.preventDefault();
                return;
            }

            if (!petType) {
                alert('请选择宠物类型');
                e.preventDefault();
                return;
            }

            // 验证文件大小
            const photoInput = document.getElementById('photo');
            if (photoInput.files.length > 0) {
                const file = photoInput.files[0];
                if (file.size > 5 * 1024 * 1024) { // 5MB
                    alert('照片文件大小不能超过5MB');
                    e.preventDefault();
                    return;
                }
            }
        });

        // 字符计数
        const descriptionTextarea = document.getElementById('description');
        const descriptionHelp = descriptionTextarea.nextElementSibling;
        
        descriptionTextarea.addEventListener('input', function() {
            const currentLength = this.value.length;
            descriptionHelp.textContent = `${currentLength}/500 个字符`;
            
            if (currentLength > 500) {
                descriptionHelp.classList.add('text-danger');
            } else {
                descriptionHelp.classList.remove('text-danger');
            }
        });
    </script>
</body>
</html>
